基于SqlSugar的开发框架循序渐进介绍（11）-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

<scriptsetup lang="ts">import { reactive,  ref,  onMounted,  watch,  computed } from"vue";



defineOptions({ name:"MyDictdata"});//定义组件或页面名称

//自定义字典控件
import MyDictdata from "./src/my-dictdata.vue";

<my-dictdatav-model="editForm.nationality"type-name="民族" />

let expandMore = ref(false); //是否展开更多条件
let list = ref([]); //页面列表数据
let listSelection = ref([]); //选中记录
let loading = ref(true); //加载状态
let sorting = ref(""); //排序条件

//分页条件
let pageInfo =reactive({

  pageIndex:1,

  pageSize:20,

  totalCount:0});

<!--分页部分-->
<divclass="block"style="height: 70px">
<el-paginationbackground :current-page="pageInfo.pageIndex":page-size="pageInfo.pageSize":total="pageInfo.totalCount":page-sizes="[10, 20, 30, 40]"layout="total, sizes, prev, pager, next,jumper"@size-change="sizeChange"@current-change="currentChange" />
</div>

const searchRef = ref<FormInstance>(); //表单引用

import { FormInstance, FormRules } from "element-plus";

<scriptlang="ts"setup>import { ref } from'vue'import { ElTree } from'element-plus'const treeRef=ref<InstanceType<typeofElTree>>()

<scriptsetup lang="ts">
//组件的接口类型
export interface ExposeViewType{

  show(id?: string|number): Function;

}//显示窗口
const show=(id: string|number)=>{if(!isNullOrUnDef(id)) {

    testuser.Get(id).then(data=>{

      Object.assign(viewForm, data);



      isVisible.value= true;//显示对话框
});

  }

};//暴露组件属性和方法
defineExpose({

  show

});

    <!--查看详细组件界面-->
    <view-dataref="viewRef" />

const viewRef = ref<ExposeViewType| null>(); //查看表单引用

<scriptsetup lang="ts">const props=defineProps<{

    foo: string

    bar?: number

}>()</script>

<scriptsetup lang="ts">interface Props {

  foo: string

  bar?: number

}



const props=defineProps<Props>()</script>

<scriptsetup lang="ts">import {  reactive,  ref,  onMounted,  watch,  computed} from 

 vue";



//定义组件名称

defineOptions({ name:"MyDictdata"});



//声明Props的接口类型

interface Props {

  placeholder?: string; // 空白提示

  typeName?: string; // 字典类型方式，从后端字典接口获取数据

  options?: Array<TreeNodeItem>; // 固定列表方式，直接绑定,项目包括id,label属性

  modelvalue?: string | number; // 接受外部v-model传入的值

  clearable?: boolean; // 是否可以清空

  disabled?: boolean; // 是否禁用

  multiple?: boolean; // 是否多选

}



//使用默认值定义Props

const props = withDefaults(defineProps<Props>(), {

  placeholder:"请选择",

  typeName:"",

  options: () => {

    return [];

  },

  clearable: true,

  disabled: false,

  multiple: false,



  modelValue:""//对应自定义控件的v-model的值

});

  <el-form-itemlabel="民族"prop="nationality">
    <my-dictdatav-model="editForm.nationality"type-name="民族" />
  </el-form-item>

  //声明事件
  const emit = defineEmits(['updateName'])

//声明控件事件
interface Emits {

  (e:"update:modelValue", value: string): void;

  (e:"change", value: string): void;

}//定义控件事件
const emit = defineEmits<Emits>();

//基于类型的声明
const emit = defineEmits<{

  (e:'change', id: number): void(e:'update', value: string): void}>()

function change(data) {

  const obj = dictItems.value.find(item => {

    return item.id + "" === data;

  });

  emit("change", obj);

}

  <el-form-itemlabel="状态"prop="state">
    <my-dictdatav-model="searchForm.state":options="Status"@change="change" />
  </el-form-item>

<scriptsetup lang="ts">import { computed, ref } from'vue'const count=ref(1)//通过computed获得doubleCount
const doubleCount=computed(()=>{returncount.value* 2})//获取
console.log(doubleCount.value)</script>

//监听外部对props属性变更,如通过ResetFields()方法重置值的时候
watch(

  ()=>props.modelValue,

  newValue=>{

    console.log(newValue);

    emit("update:modelValue", newValue + "");

  }

);



watch(

  ()=>props.options,

  newValue=>{

    newValue.forEach(item=>{

      dictItems.value.push(item);

    });

  }

);

//页面初始化加载
onMounted(() =>{

  getlist();

});

//挂载的时候初始化数据
onMounted(async () =>{var typeName =props.typeName;var options =props.options;if (typeName && typeName !== "") {//使用字典类型，从服务器请求数据
    await dictdata.GetTreeItemByDictType(typeName).then(list =>{
      if(list) {

        list.forEach(item=>{
dictItems.value.push({ id: item.id, label: item.label });

        });

      }

    });

  }else if (options && options.length > 0) {//使用固定字典列表
    options.map(item =>{

      dictItems.value.push({ id: item.id, label: item.label });

    });

  }//设置默认值
  keyword.value =props.modelValue;

});

  <el-form-itemlabel="姓名"prop="name">
    <el-inputv-model="editForm.name" />
  </el-form-item>

  <el-form-itemlabel="出生日期"prop="birthDate">
    <el-date-pickerv-model="editForm.birthDate"align="right"type="date"placeholder="选择日期"format="YYYY-MM-DD" />
  </el-form-item>

//声明Props的接口类型
interface Props {

  modelvalue?: string | number; //接受外部v-model传入的值
}//使用默认值定义Props
const props = withDefaults(defineProps<Props>(), {

  modelValue:"" //对应自定义控件的v-model的值
});

//声明组件事件
interface Emits {

  (e:"update:modelValue", value: string): void;

  (e:"change", value: string): void;

}//定义组件事件
const emit = defineEmits<Emits>();

watch(

  ()=>props.modelValue,

  newValue=>{

    console.log(newValue);

    emit("update:modelValue", newValue + "");

  }

);

<scriptsetup lang="ts">import { reactive,  ref,  onMounted,  watch,  computed } from"vue";

const count = ref(0)

const doubled= computed(() => count.value * 2)

npm i -D unplugin-auto-import

//vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'exportdefaultdefineConfig({

  plugins: [

    AutoImport({/*options*/}),

  ],

})