// 封裝全局指令 focus
Vue.directive('focus', {
  // 指令所在的dom元素，被插入到頁面中時觸發(fā)
  inserted (el) {
    el.focus()
  }
})

<template>
  <div class="my-tag">
    <input
      v-if="isEdit"
      v-focus
      ref="inp"
      class="input"
      type="text"
      placeholder="輸入標(biāo)簽"
      :value="value"
      @blur="isEdit = false"
      @keyup.enter="handleEnter"
    />
    <div 
      v-else
      @dblclick="handleClick"
      class="text">
      {{ value }}
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    value: String
  },
  data () {
    return {
      isEdit: false
    }
  },
  methods: {
    handleClick () {
      // 雙擊后，切換到顯示狀態(tài) (Vue是異步dom更新)
      this.isEdit = true
      
      // // 等dom更新完了，再獲取焦點
      // this.$nextTick(() => {
      //   // 立刻獲取焦點
      //   this.$refs.inp.focus()
      // })
    },
    handleEnter (e) {
      // 非空處理
      if (e.target.value.trim() === '') return alert('標(biāo)簽內(nèi)容不能為空')
 
      // 子傳父，將回車時，[輸入框的內(nèi)容] 提交給父組件更新
      // 由于父組件是v-model，觸發(fā)事件，需要觸發(fā) input 事件
      this.$emit('input', e.target.value)
      // 提交完成，關(guān)閉輸入狀態(tài)
      this.isEdit = false
    }
  }
}
</script>
 
<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>

<template>
  <table class="my-table">
    <thead>
      <tr>
        <slot name="head"></slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="item.id">
        <slot name="body" :item="item" :index="index" ></slot>
      </tr>
    </tbody>
  </table>
</template>
 
<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
};
</script>
 
<style lang="less" scoped>
 
.my-table {
  width: 100%;
  border-spacing: 0;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
  th {
    background: #f5f5f5;
    border-bottom: 2px solid #069;
  }
  td {
    border-bottom: 1px dashed #ccc;
  }
  td,
  th {
    text-align: center;
    padding: 10px;
    transition: all .5s;
    &.red {
      color: red;
    }
  }
  .none {
    height: 100px;
    line-height: 100px;
    color: #999;
  }
}
 
</style>

<template>
  <div class="table-case">
    <MyTable :data="goods">
      <template #head>
        <th>編號</th>
        <th>名稱</th>
        <th>圖片</th>
        <th width="100px">標(biāo)簽</th>
      </template>
 
      <template #body="{ item, index }">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>
          <img
            :src="item.picture"
          />
        </td>
        <td>
          <MyTag v-model="item.tag"></MyTag>
        </td>
      </template>
    </MyTable>
  </div>
</template>
 
<script>
// my-tag 標(biāo)簽組件的封裝
// 1. 創(chuàng)建組件 - 初始化
// 2. 實現(xiàn)功能
//    (1) 雙擊顯示，并且自動聚焦
//        v-if v-else @dbclick 操作 isEdit
//        自動聚焦：
//        1. $nextTick => $refs 獲取到dom，進行focus獲取焦點
//        2. 封裝v-focus指令
 
//    (2) 失去焦點，隱藏輸入框
//        @blur 操作 isEdit 即可
 
//    (3) 回顯標(biāo)簽信息
//        回顯的標(biāo)簽信息是父組件傳遞過來的
//        v-model實現(xiàn)功能 (簡化代碼)  v-model => :value 和 @input
//        組件內(nèi)部通過props接收, :value設(shè)置給輸入框
 
//    (4) 內(nèi)容修改了，回車 => 修改標(biāo)簽信息
//        @keyup.enter, 觸發(fā)事件 $emit('input', e.target.value)
 
// ---------------------------------------------------------------------
 
// my-table 表格組件的封裝
// 1. 數(shù)據(jù)不能寫死，動態(tài)傳遞表格渲染的數(shù)據(jù)  props
// 2. 結(jié)構(gòu)不能寫死 - 多處結(jié)構(gòu)自定義 【具名插槽】
//    (1) 表頭支持自定義
//    (2) 主體支持自定義
 
import MyTag from './components/MyTag.vue'
import MyTable from './components/MyTable.vue'
export default {
  name: 'TableCase',
  components: {
    MyTag,
    MyTable
  },
  data () {
    return {
      // 測試組件功能的臨時數(shù)據(jù)
      tempText: '水杯',
      tempText2: '鋼筆',
      goods: [
        { id: 101, picture: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg', name: '梨皮朱泥三絕清代小品壺經(jīng)典款紫砂壺', tag: '茶具' },
        { id: 102, picture: 'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg', name: '全防水HABU旋鈕牛皮戶外徒步鞋山寧泰抗菌', tag: '男鞋' },
        { id: 103, picture: 'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png', name: '毛茸茸小熊出沒，兒童羊羔絨背心73-90cm', tag: '兒童服飾' },
        { id: 104, picture: 'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg', name: '基礎(chǔ)百搭，兒童套頭針織毛衣1-9歲', tag: '兒童服飾' },
      ]
    }
  }
}
</script>
 
<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
}
 
</style>