vue中點擊輸入框彈出事件

寫了個關於常用語的管理：

1.在輸入內容時出現常用語的列表；

2.點擊內容放入輸入框中；

3.點擊列表上的設置按鈕，可對常用語進行管理。

代碼部分：

點擊輸入框時在其下方出現一個框用來顯示常用於的列表，用了一個  <el-popover placement="bottom" width="300" trigger="click"> </el-popover>    Popover彈出框

 

<el-popover
    placement="bottom"
    width="300"
    trigger="click">

    <el-table
      :data="dataList"
      border
      style="width: 100%;">
      <el-table-column
        fixed="left"
        prop="content"
        label="常用語">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showState(scope.row.content)">{{scope.row.content}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form><el-form-item></el-form-item></el-form>

    <div style="text-align: center">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-button  type="primary" style="display:block;margin:0 auto" @click="addOrUpdateHandle()">設置常用語</el-button>
      </el-form-item>
    </el-form>
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>

      <el-input slot="reference" v-model="obj" style="width:300px" placeholder="請輸入內容"></el-input>

  </el-popover>

 

其中 <el-input></el-input> 中是頁面的輸入框，其他的為彈出框內容

 

數據通過后台列表顯示方法拿到：

<script>
  import AddOrUpdate from './cyy_apply'
  export default {
    data () {
      return {
        dataList: [],
        addOrUpdateVisible: false,
        obj: ''
      }
    },
    components: {
      AddOrUpdate
    },
    mounted () {
      this.getDataList()
    },
    activated () {
      this.getDataList()
    },
    methods: {
      showState (val) {
        this.obj = val
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/cyy/apply/selectByCreateUserId'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list
          } else {
            this.dataList = []
          }
        })
      },
      // 常用語設置
      setLanguage (id) {
        this.$nextTick(() => {
          this.$router.push({name: 'cyy_apply'})
        })
      }
    }
  }
</script>

 

點擊常用語設置按鈕之后，根據路徑跳轉到管理頁面進行管理。