Vue3实现Form表单cron表达式生成和JSON渲染

cron表达式

效果

实现方式

安装： "vue3-cron-plus": "0.1.9",

import {vue3CronPlus} from "vue3-cron-plus"
import "vue3-cron-plus/dist/index.css" // 引入样式<el-form-item label="cron表达式" prop="cron"><el-input v-model="formData.cron" placeholder="cron表达式..."><template #append><el-popover :visible="state.cronPopover" trigger="click" width="700px"><vue3CronPlusi18n="cn"max-height="600px"@change="changeCron"@close="closeDialog"/><template #reference><el-button @click="state.cronPopover = !state.cronPopover">设置</el-button></template></el-popover></template></el-input></el-form-item>const state = reactive({cronPopover: false,cron: ""
})function changeCron(val) {if (typeof (val) !== "string") return falsestate.cron = valformData.value.cron = val
}function closeDialog() {state.cronPopover = false
}const DEFAULT_FORM_DATA: any = {cron: "", // cron表达式 输入或第三方组件}const formData = ref<any>(cloneDeep(DEFAULT_FORM_DATA))

JSON渲染

效果

实现方式

https://github.com/qiuquanwu/vue3-json-viewer

import JsonViewer from "vue3-json-viewer";
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
import "vue3-json-viewer/dist/vue3-json-viewer.css";
const app = createApp(App);
app.use(JsonViewer);<template><div class="box"><h4>Light</h4><JsonViewer :value="jsonData" copyable boxed sort theme="light"  @onKeyClick="keyClick"/><h4>Dark</h4><JsonViewer :value="jsonData" copyable boxed sort theme="dark"  @onKeyClick="keyClick"/></div>
</template><script setup>
import {JsonViewer} from "vue3-json-viewer"
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
import "vue3-json-viewer/dist/vue3-json-viewer.css";
import { reactive, ref } from "vue";
let obj = {name: "qiu",//stringage: 18,//ArrayisMan:false,//booleandate:new Date(),fn:()=>{},arr:[1,2,5],reg:/ab+c/i
};
const jsonData = reactive(obj);
const keyClick = (keyName)=>{console.log(keyName,"it was click")
}
</script><style>
.box{margin-top: 1rem;
}
</style>