调整结构，拆分自定义指令

bigCows · Sep 4, 2023 · 7dedadf · 7dedadf
1 parent be2a42f
commit 7dedadf
Show file tree

Hide file tree

Showing 19 changed files with 183 additions and 170 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,11 @@
-<script setup lang="ts">
-</script>
-
 <template>
 
   <RouterView />
 </template>
 
+<script setup lang="ts">
+</script>
+
 <style scoped>
 
 </style>
diff --git a/src/components/my-table.vue b/src/components/my-table.vue
@@ -79,12 +79,12 @@ import type {isShowType} from '../types/my-table.d'
     @selection-change="handleSelectionChange"
     >
 
-      <el-table-column type="selection" v-if="isShow.selectionShow" />  
+      <el-table-column type="selection" v-if="isShow.selectionShow" align="center" />  
 
-      <el-table-column type="index" v-if="isShow.sortShow" label="序号" width="70"/>
+      <el-table-column type="index" v-if="isShow.sortShow" label="序号" width="70" align="center"/>
 
       <template v-for="item in tableHeader" :key="item.key">
-        <el-table-column  :label="item.label" :prop="item.key" :show-overflow-tooltip="true" :width="item.width" >
+        <el-table-column  :label="item.label" :prop="item.key" align="center" :show-overflow-tooltip="true" :width="item.width" >
           <template #default="scope" v-if="item.slotName">
              <!-- 自定义插槽列 -->
              <slot name="columnSlot" :scope="scope"></slot>
@@ -93,7 +93,7 @@ import type {isShowType} from '../types/my-table.d'
       </template>
 
 
-      <el-table-column label="操作" v-if="isShow.detailShow">
+      <el-table-column label="操作" v-if="isShow.detailShow" align="center" fixed="right">
         <template #default="scope">
           <slot name="operation" :scope="scope"></slot>
 

diff --git a/src/demo/components-namespaces-demo.vue b/src/demo/components-namespaces-demo.vue
@@ -1,15 +1,16 @@
+<template>
+  <div>
+    <component :is="num > 0.5 ? com.oneComponentVue : com.twoComponentVue"></component>
+  </div>
+</template>
+
 <script setup lang='ts'>
 import * as com from '@/components/nameSpace'
 
 const num = ref(0)
 num.value = Math.random()
 </script>
 
-<template>
-  <div>
-    <component :is="num > 0.5 ? com.oneComponentVue : com.twoComponentVue"></component>
-  </div>
-</template>
 
 <style scoped>
 

diff --git a/src/demo/diretive-demo.vue b/src/demo/diretive-demo.vue
@@ -1,3 +1,13 @@
+
+<template>
+  <div>
+    <input type="text" v-focus="'120'" />
+    <p v-height="'100'"></p>
+    <p v-myText:bar.stop="obj">p标签</p>
+
+  </div>
+</template>
+
 <script setup lang='ts'>
 
 const obj = ref({
@@ -7,8 +17,10 @@ const obj = ref({
 
 // 自定义指令
 const vFocus = {
-  mounted(el: HTMLElement) {
-    // console.log(el,'el');
+  mounted(el: HTMLElement, binding: any) {
+    console.log(el,'el');
+    console.log(binding,'binding');
+    
     el.focus()
     el.classList.add('my-height')
     el.style.color = 'red'
@@ -20,15 +32,6 @@ const vFocus = {
 
 </script>
 
-<template>
-  <div>
-    <input type="text" v-focus />
-    <p v-height="'123'"></p>
-    <p v-myText:bar.stop="obj">p标签</p>
-
-  </div>
-</template>
-
 <style scoped>
 .my-height {
   height: 100px;

diff --git a/src/demo/index.vue b/src/demo/index.vue
@@ -1,30 +1,3 @@
-<script setup lang='ts'>
-import router from '@/router';
-
-const obj = reactive({
-  name: 'zhangsan',
-  age: 18
-})
-
-const titles = ref(['标题1', '标题2', '标题3', '标题4', '标题5', '标题6', '标题7', '标题8', '标题9'],)  // 标题数组
-const maxTitlesToShow = ref(4) // 最多显示的标题数量
-
-const truncatedTitles = computed(() => {
-  // return titles.value.slice(0, maxTitlesToShow.value)
-  if (titles.value.length <= maxTitlesToShow.value) {
-        return titles.value;
-      } else {
-        return titles.value.slice(0, maxTitlesToShow.value);
-      }
-})
-
-const showEllipsis = computed(() => {
-  return titles.value.length > maxTitlesToShow.value;
-})
-
-
-</script>
-
 <template>
   <div class="my-container">
     <header class="my-header"></header>
@@ -35,23 +8,17 @@ const showEllipsis = computed(() => {
       <el-button type="success" @click="router.push('/diretive')">directiveDemo</el-button>
       <el-button type="success" @click="router.push('/my-table')">myTableDemo</el-button>
 
-      <div class="my-log">
-        <img src="../assets/logo-vue.svg" alt="">
-      </div>
-
-      <div v-for="(value,key) in obj">
-        <h1>{{ value }}</h1>
-        <h2>{{key}}</h2>
-      </div>
-
-      <div v-for="(title, index) in truncatedTitles" :key="index" class="title">{{ title }}</div>
-      <div v-if="showEllipsis" class="title">...</div>
-
       <RouterView />
     </main>
   </div>
 </template>
 
+<script setup lang='ts'>
+import router from '@/router';
+
+</script>
+
+
 <style scoped lang="less">
 .my-container {
   height: 100vh;

diff --git a/src/demo/my-table-demo.vue b/src/demo/my-table-demo.vue
@@ -1,3 +1,51 @@
+<template>
+  <div class="layout-container">
+    <h1>my-table</h1>
+    <div class="lc-table">
+      <my-table 
+        :tableData="tableData" 
+        :tableHeader="tableHeader"    
+        :isShow="isShow"
+        :pageNum="currentPage"
+        :limit="limit"
+        :pageSizes="[1,2,3,4]"
+        :dataTotal="total"
+        @selectChange="selectChange"
+        @paginationFn="getListFn"
+      >
+      <!-- 自定义插槽列 -->
+      <template #columnSlot="{scope}">
+        <el-switch
+          v-model="scope.row.is_use"
+          v-if="scope.column.property === 'description'"
+          :active-color="'#61afef'"
+          :inactive-color="'#ccc'"
+          @change="changeStatus(scope.row)"
+          >
+        </el-switch>
+        <span class="column-text" v-if="!(scope.column.property === 'sex')">
+          {{scope.row[scope.column.property]}}
+        </span>
+
+
+        <span v-if="scope.column.property === 'sex'">
+          {{ scope.row[scope.column.property] === '1' ? '男' : '女'  }}
+        </span>
+
+      </template>
+
+      <!-- 操作列：详情、删除等功能 -->
+      <template #operation="{scope}">
+          <el-link class="opreate" :underline="false"  type="primary" @click="detailRow(scope.row)">详情</el-link>
+          <el-link class="opreate" :underline="false" type="danger" @click="delRow(scope.row)">删除</el-link>
+      </template>
+
+      </my-table>
+
+    </div>
+  </div>
+</template>
+
 <script setup lang='ts'>
 import commonApi from '@/service/api'
 import type { pagenationType, tableDataType } from '@/types/my-table.d'
@@ -93,53 +141,6 @@ const changeStatus =(rowInfo: tableDataType) => {
 
 </script>
 
-<template>
-  <div class="layout-container">
-    <h1>my-table</h1>
-    <div class="lc-table">
-      <my-table 
-        :tableData="tableData" 
-        :tableHeader="tableHeader"    
-        :isShow="isShow"
-        :pageNum="currentPage"
-        :limit="limit"
-        :pageSizes="[1,2,3,4]"
-        :dataTotal="total"
-        @selectChange="selectChange"
-        @paginationFn="getListFn"
-      >
-      <!-- 自定义插槽列 -->
-      <template #columnSlot="{scope}">
-        <el-switch
-          v-model="scope.row.is_use"
-          v-if="scope.column.property === 'description'"
-          :active-color="'#61afef'"
-          :inactive-color="'#ccc'"
-          @change="changeStatus(scope.row)"
-          >
-        </el-switch>
-        <span class="column-text" v-if="!(scope.column.property === 'sex')">
-          {{scope.row[scope.column.property]}}
-        </span>
-
-
-        <span v-if="scope.column.property === 'sex'">
-          {{ scope.row[scope.column.property] === '1' ? '男' : '女'  }}
-        </span>
-
-      </template>
-
-      <!-- 操作列：详情、删除等功能 -->
-      <template #operation="{scope}">
-          <el-link class="opreate" :underline="false"  type="primary" @click="detailRow(scope.row)">详情</el-link>
-          <el-link class="opreate" :underline="false" type="danger" @click="delRow(scope.row)">删除</el-link>
-      </template>
-
-      </my-table>
-
-    </div>
-  </div>
-</template>
 
 <style scoped>
 

diff --git a/src/demo/one-component.vue b/src/demo/one-component.vue
@@ -1,13 +1,14 @@
-<script setup lang='ts' name="oneComponent">
-
-</script>
 
 <template>
   <div style="font-size: 24px;color:aqua;">
     one
   </div>
 </template>
 
+<script setup lang='ts' name="oneComponent">
+
+</script>
+
 <style scoped>
 
 </style>
diff --git a/src/demo/pinia-demo.vue b/src/demo/pinia-demo.vue
@@ -1,17 +1,3 @@
-<script setup lang='ts'>
-import { useCounterStore } from '@/stores/counter';
-import { useUserStore } from '@/stores/user';
-
-const useCounter = useCounterStore()
-
-const useUser = useUserStore()
-
-const reset = () => {
-  useUser.$reset()
-  useCounter.$reset()
-}
-
-</script>
 
 <template>
   <div>
@@ -33,6 +19,21 @@ const reset = () => {
   </div>
 </template>
 
+<script setup lang='ts'>
+import { useCounterStore } from '@/stores/counter';
+import { useUserStore } from '@/stores/user';
+
+const useCounter = useCounterStore()
+
+const useUser = useUserStore()
+
+const reset = () => {
+  useUser.$reset()
+  useCounter.$reset()
+}
+
+</script>
+
 <style scoped>
 
 </style>

diff --git a/src/demo/single-message-demo.vue b/src/demo/single-message-demo.vue
@@ -6,7 +6,6 @@
 
 <script setup lang='ts'>
 
-
 const { appContext } = getCurrentInstance()! 
 const { singleMessage } = appContext.config.globalProperties
 
@@ -18,6 +17,7 @@ const obj1 = {
 const obj2 = ref({...obj1})
 obj2.value.name = 'ls'
 
+
 const warnFn = () => {
   singleMessage({
   message: 'This is a single message',

diff --git a/src/demo/two-component.vue b/src/demo/two-component.vue
@@ -1,12 +1,13 @@
-<script setup lang='ts' name="twoComponent">
-</script>
-
 <template>
   <div style="font-size: 24px; color: blue;">
     two
   </div>
 </template>
 
+<script setup lang='ts' name="twoComponent">
+</script>
+
+
 <style scoped>
 
 </style>
diff --git a/src/directive/index.ts b/src/directive/index.ts
@@ -0,0 +1,19 @@
+import type {App, Directive} from 'vue'
+import myText from "./modules/text";
+import height from "./modules/height";
+
+
+const directiveList: {[key:string] : Directive} = {
+    myText,
+    height
+}
+
+const directives = {
+    install(app:App<Element>) {
+        Object.keys(directiveList).forEach((key) => {
+            app.directive(key, directiveList[key])
+        })
+    }
+}
+
+export default directives;
diff --git a/src/directive/modules/height.ts b/src/directive/modules/height.ts
@@ -0,0 +1,15 @@
+import type { Directive,DirectiveBinding } from 'vue'
+
+const height:Directive =  {
+    mounted(el:HTMLElement, binding:DirectiveBinding, vnode, preVnode) {
+       console.log('123');
+       console.log(binding, 'binding11111111');
+
+    el.style.height = binding.value + 'px'
+    el.style.width = binding.value + 'px'
+    el.innerText = binding.value + 'px'
+    el.style.border = 'dashed red' 
+   }  
+}
+
+export default height;