123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- <!-- 基本的文本属性框 -->
- <template>
- <div class="base-text">
- <div class="title">属性</div>
- <ul>
- <li>
- <div class="small-title"></div>
- <div class="property">
- <div class="color-box">
- <div class="cololorSelect">
- <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="textColor"></el-color-picker>
- </div>
- <span>颜色</span>
- </div>
- <div class="line-width">
- <el-input-number
- style="width: 80px"
- v-model="size"
- controls-position="right"
- @change="changeFontSize"
- size="mini"
- :min="1"
- :max="20"
- :maxlength="100"
- ></el-input-number>
- <span>字号</span>
- </div>
- <div class="color-box">
- <div class="cololorSelect">
- <el-color-picker @change="changeBackground" show-alpha class="fix-box-1" v-model="bgColor"></el-color-picker>
- </div>
- <span>背景颜色</span>
- </div>
- </div>
- </li>
- <li>
- <el-input type="textarea" @input="changeText" :autosize="{ minRows: 2, maxRows: 4 }" v-model="text"></el-input>
- <span>文本</span>
- </li>
- </ul>
- </div>
- </template>
- <script>
- import { rgbaNum } from "@persagy-web/big-edit/lib/until";
- import { SColor } from "@persagy-web/draw";
- import bus from "@/bus/bus";
- export default {
- props: ["fontSize", "backgroundColor", "textMsg", "color"],
- data() {
- return {
- size: 0, //font-size
- text: "", //文本
- textColor: "",
- bgColor: "",
- borderLineOption: [
- {
- id: "solid",
- src: require("@/assets/images/solidLine.png"),
- },
- {
- id: "dashed",
- src: require("@/assets/images/dashedLine.png"),
- },
- {
- id: "dotted",
- src: require("@/assets/images/dotLine.png"),
- },
- ],
- borderStyle: "solid",
- };
- },
- methods: {
- // 改变文字
- changeText(val) {
- bus.$emit("updateStyle", "text", val);
- },
- // 改变颜色
- changeColor(val) {
- const colorList = rgbaNum(val);
- const color = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
- bus.$emit("updateStyle", "color", color);
- },
- // 改变背景颜色
- changeBackground(val) {
- // const colorList = rgbaNum(val);
- // const color = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
- bus.$emit("updateStyle", "backgroundColor", val);
- },
- // 改变字体大小
- changeFontSize(val) {
- bus.$emit("updateStyle", "font", val);
- },
- },
- mounted() {
- // console.log(Select)
- },
- watch: {
- color(val) {
- this.textColor = val;
- },
- fontSize(val) {
- this.size = val;
- },
- backgroundColor(val) {
- console.log("watch backgroundColor :::::::::::::");
- console.log(val);
- this.bgColor = val;
- },
- textMsg(val) {
- this.text = val;
- },
- },
- };
- </script>
- <style lang="less" scoped>
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- .base-text {
- .title {
- height: 47px;
- border-bottom: 1px solid #979797;
- color: #646c73;
- font-size: 16px;
- padding-left: 12px;
- box-sizing: border-box;
- }
- ul {
- width: calc(~"100% - 24px");
- margin: -1px 12px 0 12px;
- li {
- border-top: 1px solid #979797;
- .small-title {
- font-size: 12px;
- color: #8d9399;
- margin: 12px 0;
- }
- .property {
- display: flex;
- align-items: center;
- justify-content: space-around;
- .color-box {
- display: flex;
- align-items: center;
- flex-direction: column;
- .cololorSelect {
- width: 32px;
- height: 20px;
- overflow: hidden;
- position: relative;
- margin: 4px 0;
- .fix-box-1 {
- margin-top: -8px;
- margin-left: -8px;
- /deep/ .el-color-picker__trigger {
- width: 200px;
- height: 200px;
- }
- }
- }
- }
- .line-width {
- display: flex;
- align-items: center;
- flex-direction: column;
- margin-left: 8px;
- position: relative;
- }
- span {
- font-size: 12px;
- color: #1f2429;
- margin-top: 4px;
- }
- }
- }
- }
- }
- </style>
|