plugin-store/src/views/index-list/add-plugin.vue

<template>
  <div class="box">
    <h1 class="text-xl mt-10 font-semibold">上传插件</h1>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="forms">
      <div class="flex">
        <el-form-item class="font-semibold flex-1" prop="name">
          <template v-slot:label>
            <el-tooltip class="box-item" effect="dark" content="输入帮助" placement="top-end">
              <div>插件名称 ①：</div>
            </el-tooltip>
          </template>
          <el-input v-model="form.name" placeholder="输入插件名称"></el-input>
        </el-form-item>
        <el-form-item label="版本：" class="font-semibold flex-1" prop="edition">
          <el-input v-model="form.edition" placeholder="请输入"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="描述(可选)：" class="font-semibold" prop="desc">
        <el-input v-model="form.desc" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
      <div class="flex">
        <el-form-item label="行业：" class="font-semibold flex-1" prop="region">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option value="Zone one"></el-option>
            <el-option value="Zone two"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类：" class="font-semibold flex-1" prop="sort">
          <el-select v-model="form.sort" multiple placeholder="请选择，可多选">
            <el-option value="Zone one"></el-option>
            <el-option value="Zone two"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="标签：" class="font-semibold" prop="tags">
        <el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择标签">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="HTML：" class="font-semibold" prop="htmlCodes">
        <el-input v-model="form.htmlCodes" type="textarea" placeholder="请输入HTML代码片段"></el-input>
      </el-form-item>
      <el-form-item label="JS：" class="font-semibold" prop="jsCodes">
        <el-input v-model="form.jsCodes" type="textarea" placeholder="请输入JS代码片段"></el-input>
      </el-form-item>
      <el-form-item label="CSS：" class="font-semibold" prop="cssCodes">
        <el-input v-model="form.cssCodes" type="textarea" placeholder="请输入CSS代码片段"></el-input>
      </el-form-item>
      <el-form-item> <el-switch v-model="form.delivery" class="mr-3"></el-switch> 是否压缩代码 </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">发布</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const formRef = ref(null);

const form = reactive({
  name: '',
  edition: '',
  desc: '',
  region: '',
  sort: '',
  tags: '',
  htmlCodes: '',
  jsCodes: '',
  cssCodes: '',
  delivery: '',
});

const rules = {
  name: [{ required: true, message: '请输入插件名称', trigger: 'blur' }],
  edition: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
  region: [{ required: true, message: '请选择行业', trigger: 'blur' }],
  sort: [{ required: true, message: '请选择分类', trigger: 'blur' }],
  tags: [{ required: true, message: '请选择标签', trigger: 'blur' }],
  htmlCodes: [{ required: true, message: '请输入HTML代码', trigger: 'blur' }],
  jsCodes: [{ required: true, message: '请输入JS代码', trigger: 'blur' }],
};

const onSubmit = () => {
  formRef.value.validate(true);
};
const resetForm = () => {
  formRef.value.resetFields();
};
const options = [
  {
    value: 'HTML',
    label: 'HTML',
  },
  {
    value: 'CSS',
    label: 'CSS',
  },
  {
    value: 'JavaScript',
    label: 'JavaScript',
  },
];
</script>

<style>
.box {
  padding-left: 5%;
}
.el-form-item {
  margin-top: 1rem;
}
.tags {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-form-item__label {
  display: flex;
  justify-content: end;
  flex: 0 0 auto;
  text-align: right;
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-regular);
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
</style>