vue-cli环境的组件开发

  1 <template>
  2     <div>
  3         <Modal class="pingjia" v-model="show">
  4             <p class="title">请您对本次服务进行评分</p>
  5             <div class="stars">
  6                 <span>服务态度：</span><Rate class="sbox" v-model="assess_content.friendScore"></Rate>
  7             </div>
  8             <div class="stars">
  9                 <span>工作效率：</span><Rate class="sbox" v-model="assess_content.speedScore"></Rate>
 10             </div>
 11             <div class="stars">
 12                 <span>完成质量：</span><Rate class="sbox" v-model="assess_content.qualityScore"></Rate>
 13             </div>
 14             <p class="sec_title">
 15                 <span>
 16                     印象标签
 17                 </span>
 18             </p>
 19             <ul class="kuaisupl clearfix">
 20                 <li v-for="item in tags" @click="assess($event)">{{item.tagName}}</li>
 21             </ul>
 22             <div class="tuijian">
 23                 <span>
 24                     <em @click="tuijian($event)" att-v="1"  class="self_cion iconfont icon-tuijian" :class="{on:assess_content.isCommend==1}"></em>
 25                     <span>值得推荐</span>
 26                 </span>
 27                 <span>
 28                     <em @click="tuijian($event)" att-v="2" class="self_cion iconfont icon-butuijian" :class="{on:assess_content.isCommend==2}"></em>
 29                     <span>不推荐</span>
 30                 </span>
 31             </div>
 32             <div class="textarea">
 33                 <textarea v-model="assess_content.assessContent" placeholder="写下您对商家的评价吧~"></textarea>
 34             </div>
 35             <div slot="footer" class="footer">
 36                 <a class="sendbtn" @click="sendassess">确认提交</a>
 37             </div>
 38         </Modal>
 39     </div>
 40 </template>
 41 
 42 <script>
 43     import {orderAssess,getOrderassess} from "@/api/api"
 44     export default{
 45         props:{
 46             ordernum:{
 47                 type:String,
 48                 default:''
 49  }, 50  }, 51  data(){ 52 return{ 53 show:false, 54  assess_content:{ 55 isCommend:0, 56 friendScore:0, 57 speedScore:0, 58 qualityScore:0, 59 assessTag:"", 60 assessContent:"" 61  }, 62 tags:"", 63  } 64  }, 65  methods:{ 66  assess($event){ 67 $($event.target).toggleClass('active') 68  }, 69  gettag(){ 70 var _this=this 71 this.$ajax.get("http://*****/***.js").then(data => { 72 _this.tags = data.data 73  }) 74  }, 75  tuijian($event){ 76 $('.self_cion').removeClass("on") 77 $($event.target).addClass("on") 78 var value=$($event.target).attr('att-v') 79 this.assess_content.isCommend=value 80  }, 81  sendassess(){ 82 var list=[] 83 $('.kuaisupl li').each(function(index,el){ 84 if($(el).attr('class')=="active"){ 85  list.push($(el).html()) 86  } 87  }) 88 var newlist=list.join(',') 89 this.assess_content.assessTag=newlist 90 var data=Object.assign({},this.assess_content,{"tradeNo":this.ordernum}) 91 orderAssess(data).then(data=>{ 92 if (data.code==0) { 93 this.$Notice.success({ 94  desc: data.desc 95  }); 96 this.show=false 97 this.finish() 98 }else{ 99 this.$Notice.error({ 100  desc: data.desc 101  }); 102  } 103  }) 104  }, 105  finish(){ 106 this.$emit("ok","ok") 107  }, 108  plaction(){ 109 getOrderassess({"tradeNo":this.ordernum}).then(data=>{ 110 this.assess_content=Object.assign({},this.assess_content,JSON.parse(data.result)) 111 var newarr=this.assess_content.assessTag 112 this.tags.forEach(function(el,index){ 113 if(newarr.indexOf(el.tagName)>=0){ 114 $('.kuaisupl li').eq(index).addClass("active") 115  } 116  }) 117 118  }) 119  }, 120  }, 121  mounted(){ 122 this.gettag() 123  }, 124  watch:{ 125  show(newv,oldv){ 126 if (newv==false) { 127 this.assess_content={ 128 isCommend:0, 129 friendScore:0, 130 speedScore:0, 131 qualityScore:0, 132 assessTag:"", 133 assessContent:"" 134  } 135 $('.kuaisupl li').removeClass("active") 136 }else{ 137 this.plaction() 138  } 139  } 140  } 141  } 142 </script> 

props：接受外部传过来的参数 （内部直接this.**调用）

$emit 第一个参数是给调用的，第二个是给外部传值

 

父级调用

先import引入组件

再components调用组件

 

设置了ref的话可以直接通过   $refs.pl.子组件参数   直接修改子组件内部参数

一个简单的组件就完成啦

 

转载于:https://www.cnblogs.com/july-lin/p/9399723.html