mint-ui popup + 父子传值 + 子父传值
vue 2017-11-08 16:28:31

 参考：

https://segmentfault.com/q/1010000007959780

 

XML/HTML Code复制内容到剪贴板
  1. <!-- 加参数 :modal=false 关闭遮罩 -->  
  2. <mt-popup v-model="popupVisible" position="bottom">  
  3.     <chooseType :type=type> </chooseType>  
  4. </mt-popup>  

解释：

1、定义popupVisible值为true 或者 false 表示打开popup层，position表示弹层位置

2、:type 表示 父层将传type值给子层

 

父层代码：

XML/HTML Code复制内容到剪贴板
  1. <!-- 加参数 :modal=false 关闭遮罩 -->  
  2. <mt-popup v-model="popupVisible" position="bottom">  
  3.     <chooseType :type=type> </chooseType>  
  4. </mt-popup>  
  5.   
  6. <script>  
  7.     import chooseType from '@/components/cms/chooseType.vue'  
  8.       
  9.     export default {  
  10.         name: 'publish',  
  11.         data: function() {  
  12.             return {  
  13.                 popupVisible: false, //popup 弹层默认关闭  
  14.                 type: 1, //1不限，2免费  
  15.             }  
  16.         },  
  17.         components: {  
  18.             chooseType  
  19.         },  
  20.         methods: { // 这里放方法，方法之间用逗号隔开  
  21.   
  22.             publishFree() {  
  23.                 // 发布免费内容，改变传入子层中的type值  
  24.                 this.type = 2;  
  25.                 this.openPopup();   
  26.             },  
  27.             publishPay() {  
  28.                 //发布付费内容，改变传入子层中的type值  
  29.                 this.type = 1;  
  30.                 this.openPopup();  
  31.             },  
  32.   
  33.             //打开弹出层，默认有透明背景，点击遮罩关闭弹出层  
  34.             openPopup() {  
  35.                 // 打开popup  
  36.                 this.popupVisible = true  
  37.             },  
  38.             closePopup() {  
  39.                 // 关闭popup  
  40.                 this.popupVisible = false  
  41.             },  
  42.   
  43.         }  
  44. </script>  

 

子层接收传参：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div class="type-main">  
  3.         <p @click="publish($store.state.common.publishLive,type)">发布</p>  
  4.     </div>  
  5. </template>  
  6.   
  7. <script>  
  8.     export default {  
  9.         name: 'chooseTag',  
  10.         data: function() {  
  11.             return {  
  12.             }  
  13.         },  
  14.         props:['type'],  
  15.         methods: {  
  16.             publish(type,fee){  
  17.                 console.log(fee);  
  18.             }  
  19.         }  
  20.     }  
  21. </script>  

 

 

 

子父传值：

XML/HTML Code复制内容到剪贴板
  1. <!--  
  2.     要求：子层点击确定的时候，执行关闭popup层  
  3.     v-on:childMethod    监听子层传过来的方法名  
  4. -->  
  5. <mt-popup v-model="popupVisible" position="right">  
  6.     <chooseTag :status="popupVisible" v-on:childMethod="listenToChooseTagCom"> </chooseTag>  
  7. </mt-popup>  
  8.   
  9. <script>  
  10.     export default {  
  11.         name: 'publishBase',  
  12.         data: function() {  
  13.             return {  
  14.                 popupVisible: false, // popup默认为关闭  
  15.             }  
  16.         },  
  17.         methods: {  
  18.             listenToChooseTagCom(val) {  
  19.                 //监听选择tag的组件内传值，如果想要关闭，子层传一个false值过来即可  
  20.                 this.popupVisible = val  
  21.             }  
  22.         }  
  23.     }  
  24. </script>  
  25.   
  26. 子层：  
  27. <template>  
  28.     <button class="fr" @click="closePopup">关闭popup层</button>  
  29. </template>  
  30. <script>  
  31.     export default {  
  32.         methods: {  
  33.             closePopup() {  
  34.                 // 关闭当前popup，向父层传值  
  35.                 this.$emit('childMethod', false);  
  36.             }  
  37.         }  
  38.     }  
  39. </script>  

 

 

 

DEMO1：选择标签，有确定选择按钮，支持关闭事件

QQ截图20180315152101.png

XML/HTML Code复制内容到剪贴板
  1. <!-- 打开选择tag弹出层，监听子层是否要关闭 -->  
  2. <mt-popup v-model="popupTagVisible" position="bottom" class="tagMainPopup">  
  3.     <chooseTag v-on:childClosePopup="listenTagPopupIfClose" v-on:chooseTags="listenTagPopupChoose" :tags="defaultTags"> </chooseTag>  
  4. </mt-popup>  

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2. import chooseTag from "@/components/cms/chooseTag.vue";  
  3.   
  4. export default {  
  5.     name: "QuestionnaireBody",  
  6.     data() {  
  7.         return {  
  8.             popupTagVisible: false, // 选择tag的popup默认为关闭  
  9.         };  
  10.     },  
  11.     computed: {  
  12.         defaultTags() {  
  13.             return this.publish_tag ? this.publish_tag.join(",") : "";  
  14.         },  
  15.     },  
  16.     components: {  
  17.         chooseTag,  
  18.     },  
  19.     mounted() {  
  20.         this.init();  
  21.     },  
  22.     methods: {  
  23.         init() {  
  24.             // 初始化  
  25.         },  
  26.         openTagPopup() {  
  27.             // 打开tag选择的popup  
  28.             this.popupTagVisible = true;  
  29.         },  
  30.         listenTagPopupIfClose(val) {  
  31.             //监听tag弹出层是否关闭popup  
  32.             this.popupTagVisible = val;  
  33.         },  
  34.         listenTagPopupChoose(val) {  
  35.             //监听选择的tag标签  
  36.             this.publish_tag = val;  
  37.         },  
  38.   
  39.     destroyed() {  
  40.         // 生命周期 - 离开当前路由后操作  
  41.           
  42.     }  
  43. };  

 

 chooseTag.vue：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   
  3.       
  4.     <div class="classify_list profession_item">  
  5.         <div class="box_shadow classify_details_item">  
  6.             <div class="tit clear">  
  7.                 <h3 class="fl">更多标签  
  8.                     <span class="tip">注：最多选择3个标签</span>  
  9.                 </h3>  
  10.                 <button class="fr" @click="closePopup">确定</button>  
  11.             </div>  
  12.   
  13.             <span v-for="(tag, index) in tagList" :value="tag.tagName" :class="{'classify_item active-choose':tag.isA,'classify_item':!tag.isA}" v-on:click="addTag($event,tag,index)">{{tag.tagName}}</span>  
  14.   
  15.         </div>  
  16.     </div>  
  17.   
  18. </template>  
  19.   
  20.   
  21. <script>  
  22. export default {  
  23.     name: "chooseTag",  
  24.     data: function() {  
  25.         return {  
  26.             tagList: this.getTagList(), //获取浏览器存储的tagList  
  27.             value: [] //选择的tag数组  
  28.         };  
  29.     },  
  30.     props: [  
  31.         "tags", //父组件传过来的默认选中的tag名称  
  32.     ],  
  33.     methods: {  
  34.         getTagList() {  
  35.             // 获取tag的列表数据，这里从缓存中取，也可以跑接口，据业务场景来定  
  36.             let list = sessionStorage.getItem("tagList");  
  37.             return JSON.parse(list);  
  38.         },  
  39.           
  40.         addTag(event, tag, index) {  
  41.             // 添加tag  
  42.             let isA = this.tagList[index].isA;  
  43.             let that = this;  
  44.             if (!isA) {  
  45.                 // 在选中的时候要判断  
  46.                 if (this.value.length + 1 > 3) {  
  47.                     that.$toast({  
  48.                         message: "最多只能选择三个！",  
  49.                         position: "top",  
  50.                         className: "toast-z"  
  51.                     });  
  52.                     return false;  
  53.                 }  
  54.             }  
  55.   
  56.             this.value = [];  
  57.             this.$set(this.tagList[index], "isA", !isA);  
  58.             this.tagList.forEach(function(item) {  
  59.                 if (item.isA) {  
  60.                     that.value.push(item.tagName);  
  61.                 }  
  62.             });  
  63.         },  
  64.         cancelChoose() {  
  65.             // 取消选择按钮，事件保留  
  66.             this.value = [];  
  67.             this.tagList.forEach(function(item) {  
  68.                 item.isA = false;  
  69.             });  
  70.   
  71.             this.closePopup();  
  72.         },  
  73.         closePopup() {  
  74.             // 关闭当前popup  
  75.             this.$emit("childClosePopup", false);  
  76.         }  
  77.     },  
  78.     watch: {  
  79.         tags() {  
  80.             let vm = this;  
  81.             //console.log(this.tags);  
  82.             if (vm.tags.length) {  
  83.                 // 如果父层有tag传递进来  
  84.                 let tags = vm.tags.split(",");  
  85.   
  86.                 vm.value = tags; //给已选择的数组赋值  
  87.                 vm.tagList.forEach(function(item, index) {  
  88.                     if (tags.indexOf(item.tagName) !== -1) {  
  89.                         vm.$set(vm.tagList[index], "isA", true);  
  90.                     }  
  91.                 });  
  92.                 //console.log(tags);  
  93.             }  
  94.         },  
  95.         value() {  
  96.             //设置选择的tag 监听，并且即时传给父层展示  
  97.             this.$emit("chooseTags", this.value);  
  98.         }  
  99.     }  
  100. };  
  101. </script>  

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/192.html

上一篇 mint-ui checklist
下一篇 vue引入jquery及第三方插件
相关的文章
Powered by yoyo苏ICP备15045725号