Vue不懂的知识点

2020-11-18 

今天有个经历，webstorm 打开Vue项目电脑风扇很响，最后使用vscode打开电脑安静多了！

// template 代码
<div>
      <a-modal v-model="visible" title="请选择结束原因:" @ok="sureButtonClick">
        <a-input-group compact>
          <a-select
            style=" 90%"
            @change="handleChange"
            v-model="selectText"
          >
            <!-- :value="item.dictValue" -->
            <a-select-option
              v-for="(item, index) in this.jslcOption"
              :key="index"
              :value="item.dictKey"
            >
              {{ item.dictKey }}
            </a-select-option>
          </a-select>
        </a-input-group>

        <div style="margin: 24px 0" />

        <a-textarea
          placeholder="请输入其他原因!"
          :auto-size="{ minRows: 2, maxRows: 6 }"
          style=" 90%"
          v-show="textareaShow"
          v-model="areaText"
        />
      </a-modal>
    </div>

//js code

import {

orderinfo,

yjstatu,

sbkqy,

spdescriber,

getPassInfo,

jslcOptionMethod,

banliOverMethod,

} from "@/api/basedata/basedata"; //请求接口引入

data() {
    return {
      selectText: "", //选择框数据
      areaText: "", //输入框内容
      visible: false, //结束流程弹出界面判读
      textareaShow: false, //结束原因选择 其他 时候显示的输入框
},
// 结束流程弹框确定按钮点击
    sureButtonClick() {
      this.visible = false;
      this.$Log.success("结束流程弹框确定按钮点击");
      let params = {};
      params.businessId = this.businessId;
      if (this.textareaShow) {
        params.terminationReason = this.areaText;
      } else {
        params.terminationReason = this.selectText;
      }
      this.$Log.success(params.terminationReason);
      banliOverMethod(params)
        .then((res) => {
          console.log(res);
          // 请求成功 -- 处理数据
          if(200 == res.data.code ){
            this.$message.success(res.data.msg);
            this.handlestepmsg.current = this.handlestepmsg.steplist.length;
          }else{
            this.$message.error(res.data.msg);
          }


        })
        .catch((error) => {
          console.log("手动终止流程---失败");
        });
    },
handleChange(value) {
      setTimeout(() => {
        this.textareaShow = "其他" == value ? true : false;
      }, 400);
    },

2020-11-10

子视图向父视图传值

// sbkqyShow.vue  -- 子视图
<template> 
    这里是UI布局
</template>

<script> 
export default{
	 name:”sbkqyShow”,
	data(){
		return{
            //数据处理
		}
	},
	methods:{
        showData() {
            _this.$emit("qy", "这里是传值到父视图");
        }
        
	}	
 }
</script>
// detail -- 父视图
import sbkqyShow from "../../../slshbzk/sbkqy/sbkqyShow"; //导入文件
<template> 
    这里是UI布局
    //  sbkqy-show  这个标签不知道从哪里来的
    <sbkqy-show 
        ref="qy"
        @qy="setMsg"
    ></sbkqy-show>
</template>

<script> 
export default{
	 name:”sbkqyShow”,
	data(){
		return{
            //数据处理
		}
	},
    // 定义组件
    components: {
        sbkqyShow,
    },
	methods:{
        setMsg(msg){
            // 调用成功 -- UI里面绑定的方法
        },
	},
    mounted(){
        this.$nextTick(() => {
          this.$refs.qy.showData();// 调用子视图方法
        });
    }	
 }
</script>

　　

2020-11-09

template里面方法调用

//第一部分 
<template>
   <basic-container>
         <template slot-scope="{ row }" slot="processTypeGroup">
         　　<span>{{ getsxname(row.processTypeGroup) }} </span>
       </template>
     </basic-container>
 </template>
//第二部分
export default {
　　data(){
　　　　　　
　　　　
//步骤类型字典
dictstep: {
　　0: "挂失",
　　1: "社保卡申领",
　　2: "社保卡补换卡",
　　3: "社保卡启用",
　　4: "社保卡密码修改",
　　5: "社保卡密码重置",
　　6: "解除挂失",
},

　　},
　　methods:{


// 取值赋值参数修改
getsxname(namestr) {
　　
　　let arr = namestr.split(",");
　　let str = [];
　　arr.forEach((e) => {//循环arr
　　　　str.push(this.dictstep[e]);//根据字典数据处理！
　　});
　　str = str.toString();
　　return str;
},

　　}
}

　　

2020-11-07

这个应该是跳转到页面

this.$router : 通过注入路由，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前的路由

handleDetail(row) {
      this.$router.push({//这个应该是跳转到页面
        path: `/work/process/detail/${row.processInstanceId}/${row.businessId}/${row.processType}`,
      });
    },

2020-11-05

H5属性加前缀冒号“:”。
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.0/lib/index.js"></script>
<div id="app">
<template>
  <el-radio :disabled=false v-model="radio" label="禁用">备选项</el-radio>
  
  <el-radio :disabled=true v-model="radio" label="选中且禁用">备选项</el-radio>
</template>
</div>

加冒号 -- 后面是变量/表达式，

没加冒号 -- 后面是字符串字面量