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

<script setup lang="ts">
import { reactive,  ref,  onMounted,  watch,  computed } from "vue";
defineOptions({ name: "MyDictdata" }); //定义组件或页面名称

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

<my-dictdata v-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
});

<!--分页部分 -->
<div class="block" style="height: 70px">
<el-pagination background :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";

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

<script setup 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-data ref="viewRef" />

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

<script setup lang="ts">
const props = defineProps<{
    foo: string
    bar?: number
}>()
</script>

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}
const props = defineProps<Props>()
</script>

<script setup 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-item label="民族" prop="nationality">
    <my-dictdata v-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-item label="状态" prop="state">
    <my-dictdata v-model="searchForm.state" :options="Status" @change="change" />
  </el-form-item>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  const count = ref(1)
  // 通过computed获得doubleCount
  const doubleCount = computed(() => {
    return count.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-item label="姓名" prop="name">
    <el-input v-model="editForm.name" />
  </el-form-item>

<el-form-item label="出生日期" prop="birthDate">
    <el-date-picker v-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 + "");
  }
);

<script setup 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'
export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})