com-add-tab.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <!-- 双击弹出的窗口 -->
  3. <div class="at-form-fox" style="width: 0px; height: 0px; overflow: hidden; ">
  4. <div class="at-form-dom" style="width: 300px; padding: 20px 0 10px 0; background-color: #FFF;">
  5. <el-form label-width="80px" size="mini">
  6. <!-- <h5 style="padding: 0 0 10px 26px;">创建新页面</h5> -->
  7. <el-form-item label="标题:">
  8. <el-input style="width: 200px;" v-model="atTitle" placeholder="页面标题"></el-input>
  9. </el-form-item>
  10. <el-form-item label="地址:" style="margin-top: -10px;">
  11. <el-input style="width: 200px;" v-model="atUrl" placeholder="https://www.baidu.com/"
  12. @keyup.native.enter="atOk()"></el-input>
  13. </el-form-item>
  14. <el-form-item label="操作:" style="margin-top: -10px;">
  15. <el-button type="primary" icon="el-icon-plus" size="mini" @click="atOk()">确定</el-button>
  16. </el-form-item>
  17. </el-form>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. module.exports = {
  23. data() {
  24. return {
  25. atTitle: '', // 添加窗口时: 标题
  26. atUrl: '', // 添加窗口时: 地址
  27. }
  28. },
  29. methods: {
  30. // 双击tab栏空白处, 打开弹窗添加窗口
  31. atOpen: function () {
  32. window.r_layer_12345678910 = layer.open({
  33. type: 1,
  34. // shade: false,
  35. shade: 0.5,
  36. title: "添加新窗口", //不显示标题
  37. content: $('.at-form-dom'), //捕获的元素
  38. cancel: function () {
  39. }
  40. });
  41. },
  42. // 根据表单添加新窗口
  43. atOk: function () {
  44. if (this.atTitle == '' || this.atUrl == '') {
  45. return;
  46. }
  47. this.$root.showTab({id: new Date().getTime(), name: this.atTitle, url: this.atUrl});
  48. layer.close(window.r_layer_12345678910);
  49. this.atTitle = '';
  50. this.atUrl = '';
  51. },
  52. },
  53. created() {
  54. }
  55. }
  56. </script>
  57. <style scoped>
  58. </style>