baseTextPro.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <!-- 基本的文本属性框 -->
  2. <template>
  3. <div class="base-text">
  4. <div class="title">属性</div>
  5. <ul>
  6. <li>
  7. <div class="small-title"></div>
  8. <div class="property">
  9. <div class="color-box">
  10. <div class="cololorSelect">
  11. <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="textColor"></el-color-picker>
  12. </div>
  13. <span>颜色</span>
  14. </div>
  15. <div class="line-width">
  16. <el-input-number
  17. style="width: 80px"
  18. v-model="size"
  19. controls-position="right"
  20. @change="changeFontSize"
  21. size="mini"
  22. :min="1"
  23. :max="20"
  24. :maxlength="100"
  25. ></el-input-number>
  26. <span>字号</span>
  27. </div>
  28. <div class="color-box">
  29. <div class="cololorSelect">
  30. <el-color-picker @change="changeBackground" show-alpha class="fix-box-1" v-model="bgColor"></el-color-picker>
  31. </div>
  32. <span>背景颜色</span>
  33. </div>
  34. </div>
  35. </li>
  36. <li>
  37. <el-input type="textarea" @input="changeText" :autosize="{ minRows: 2, maxRows: 4 }" v-model="text"></el-input>
  38. <span>文本</span>
  39. </li>
  40. </ul>
  41. </div>
  42. </template>
  43. <script>
  44. import { rgbaNum } from "@persagy-web/big-edit/lib/until";
  45. import { SColor } from "@persagy-web/draw";
  46. import bus from "@/bus/bus";
  47. export default {
  48. props: ["fontSize", "backgroundColor", "textMsg", "color"],
  49. data() {
  50. return {
  51. size: 0, //font-size
  52. text: "", //文本
  53. textColor: "",
  54. bgColor: "",
  55. borderLineOption: [
  56. {
  57. id: "solid",
  58. src: require("@/assets/images/solidLine.png"),
  59. },
  60. {
  61. id: "dashed",
  62. src: require("@/assets/images/dashedLine.png"),
  63. },
  64. {
  65. id: "dotted",
  66. src: require("@/assets/images/dotLine.png"),
  67. },
  68. ],
  69. borderStyle: "solid",
  70. };
  71. },
  72. methods: {
  73. // 改变文字
  74. changeText(val) {
  75. bus.$emit("updateStyle", "text", val);
  76. },
  77. // 改变颜色
  78. changeColor(val) {
  79. const colorList = rgbaNum(val);
  80. const color = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
  81. bus.$emit("updateStyle", "color", color);
  82. },
  83. // 改变背景颜色
  84. changeBackground(val) {
  85. // const colorList = rgbaNum(val);
  86. // const color = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
  87. bus.$emit("updateStyle", "backgroundColor", val);
  88. },
  89. // 改变字体大小
  90. changeFontSize(val) {
  91. bus.$emit("updateStyle", "font", val);
  92. },
  93. },
  94. mounted() {
  95. // console.log(Select)
  96. },
  97. watch: {
  98. color(val) {
  99. this.textColor = val;
  100. },
  101. fontSize(val) {
  102. this.size = val;
  103. },
  104. backgroundColor(val) {
  105. console.log("watch backgroundColor :::::::::::::");
  106. console.log(val);
  107. this.bgColor = val;
  108. },
  109. textMsg(val) {
  110. this.text = val;
  111. },
  112. },
  113. };
  114. </script>
  115. <style lang="less" scoped>
  116. ul,
  117. li {
  118. margin: 0;
  119. padding: 0;
  120. list-style-type: none;
  121. }
  122. .base-text {
  123. .title {
  124. height: 47px;
  125. border-bottom: 1px solid #979797;
  126. color: #646c73;
  127. font-size: 16px;
  128. padding-left: 12px;
  129. box-sizing: border-box;
  130. }
  131. ul {
  132. width: calc(~"100% - 24px");
  133. margin: -1px 12px 0 12px;
  134. li {
  135. border-top: 1px solid #979797;
  136. .small-title {
  137. font-size: 12px;
  138. color: #8d9399;
  139. margin: 12px 0;
  140. }
  141. .property {
  142. display: flex;
  143. align-items: center;
  144. justify-content: space-around;
  145. .color-box {
  146. display: flex;
  147. align-items: center;
  148. flex-direction: column;
  149. .cololorSelect {
  150. width: 32px;
  151. height: 20px;
  152. overflow: hidden;
  153. position: relative;
  154. margin: 4px 0;
  155. .fix-box-1 {
  156. margin-top: -8px;
  157. margin-left: -8px;
  158. /deep/ .el-color-picker__trigger {
  159. width: 200px;
  160. height: 200px;
  161. }
  162. }
  163. }
  164. }
  165. .line-width {
  166. display: flex;
  167. align-items: center;
  168. flex-direction: column;
  169. margin-left: 8px;
  170. position: relative;
  171. }
  172. span {
  173. font-size: 12px;
  174. color: #1f2429;
  175. margin-top: 4px;
  176. }
  177. }
  178. }
  179. }
  180. }
  181. </style>