avue 富文本avue-form ,avue-crud 及独立使用的详细介绍
介绍如何在avue-formavue-crud 及独立使用 avue 里的富文本,且可上传图片。
·
介绍如何在 avue-form avue-crud 及独立使用 avue 里的富文本,且可上传图片
在 avue-form avue-crud 如何使用富文本
安装命令 avue
npm install avue-plugin-ueditor --save
main.js 文件
备注 :main.js 文件已经将 富文本注册到全局,无需再次引入
avue-form 与 avue-crud 使用富文本 只要在option里配置上就可以,上传图片需要在富文本里配置上传路径案例如下
以avue-form 为例
<template>
<basic-container>
<avue-form :option="option" v-model="form" @submit="handleSubmit">
</avue-form>
</basic-container>
</template>
<script>
import { getforFree,} from "@/api/activity/login";
import { mapGetters } from "vuex";
export default {
data() {
return {
form: {},
query: {},
codeApiList: "",
option: {
labelWidth: 120,
column: [
{
labelWidth: 20,
type: "title",
prop: "titleName",
span: 24,
},
{
label: "说明文字",
prop: "descriptiveText",
component: "AvueUeditor",
options: {
action: "/api/blade-resource/oss/endpoint/put-file",
props: {
res: "data",
url: "link",
},
},
span: 24,
},
],
},
};
},
},
[富文本效果](https://img-blog.csdnimg.cn/07f784c9acc14598955e3a1d86f974e1.png
独立使用avue 富文本
<template>
<basic-container>
<div
v-for="(item, index) in pay"
:key="item.id"
style="padding: 20px; margin-top: 10px; border-radius: 6px"
@click="listFn(index)"
:class="{ on: active == index }"
>
<AvueUeditor
v-model="item.descriptiveText"
:options="upload"
></AvueUeditor>
</div>
</basic-container>
</template>
<script>
import { getpay} from "@/api/activity/login";
import { mapGetters } from "vuex";
export default {
data() {
return {
upload: {
//普通图片上传
action: "/api/blade-resource/oss/endpoint/put-file",
props: {
res: "data",
url: "link",
},
},
},
methods: {
},
</script>
<style lang="scss" scoped>
</style>
更多推荐
已为社区贡献11条内容
所有评论(0)