谷粒商城-新增商品-sku信息输入框放大

m0_56738550

已于 2023-03-03 18:07:18 修改

阅读量204

点赞数

文章标签： java vue.js elementui

于 2022-12-01 22:59:39 首次发布

本文链接：https://blog.csdn.net/m0_56738550/article/details/128140075

版权

`最终效果图`

输入框效果图

1. 编写inputText.vue文件，我的文件路径是renren-fast-vue/src/components/input/inputText.vue

若放在别的地方，引用时写对地址就行

新建vue文件，复制代码

<template>

  <el-dialog
    :visible.sync="this.textVisible"
    width="30%"
    :close-on-click-modal="false"
    :before-close="handleSiadClose"
  >
    <el-input
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4}"
      ref="tInput"
      autofocus
      :show-word-limit="true"
      placeholder="请输入内容"
      v-model="textarea">
    </el-input>
    <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="handleClose">取 消</el-button>
    <el-button size="small" type="primary" @click="submitText">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: "inputText",
  data() {
    return {
      textarea: "",
      textVisible: false
    }
  },
  methods:{
    submitText(){
      this.$emit("submit-text",this.textarea);
      this.textarea = "";
      this.textVisible = false;
    },
    handleClose(){
      this.textVisible = false;
    },
    openText(content) {
      this.textVisible = true;
      this.$nextTick(function () {
        this.$refs['tInput'].focus()
      });
      this.textarea = content;
    },
    handleSiadClose(){
      this.textVisible = false;
    }
  },

}

</script>

<style scoped>

</style>

2. 项目代码中添加引用

在项目中的renren-fast-vue/src/views/modules/product/spuadd.vue文件中的第370行代码左右处

在script标签下引入组件 ,并注入对象

import InputText from "@/components/input/inputText";

在这里插入图片描述

3. 添加所需属性及方法

data中添加所要用到的属性

rowNum:"",// 行号
colNum:"",// 列号
textVisible: false,// 输入框显示

在这里插入图片描述

methods中添加要用到的方法

submitText(textarea){
  // 1.商品名称 2.标题 3.副标题 4.价格
  switch (this.colNum) {
    case 1:{
      this.spu.skus[this.rowNum].skuName = textarea;
      break;
    }
    case 2:{
      this.spu.skus[this.rowNum].skuTitle = textarea;
      break;
    }
    case 3:{
      this.spu.skus[this.rowNum].skuSubtitle = textarea;
      break;
    }
    case 4:{
      if(textarea*1){
        this.spu.skus[this.rowNum].price = textarea*1;
      }
      break;
    }

  }

},
openText(content,colNum,rowNum) {
  this.textVisible = true;
  this.colNum = colNum;
  this.rowNum = rowNum;
  this.$nextTick(()=> {
    this.$refs.inputText.openText(content);
  })
},

方法就不贴图了

4. 添加点击事件，使用组件

在项目中的renren-fast-vue/src/views/modules/product/spuadd.vue文件中的第180行代码左右开始

“商品名称”、“标题”、“副标题”、“价格” 每个下面的el-input标签中添加单击事件@click.native="openText(scope.row.skuName,1,scope.$index)，并在标签下一行引用组件

注意数字不要填错了，传入数字是为了定位哪个调用了组件

<el-input v-model="scope.row.skuName"
          @click.native="openText(scope.row.skuName,1,scope.$index)"></el-input>
<input-text
    v-if="textVisible"
    ref="inputText"
    @submit-text="submitText"></input-text>
</template>

商品名称下的代码