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.子组件参数   直接修改子组件内部参数

一个简单的组件就完成啦