@jx3box/jx3box-editor 2.2.5 → 2.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/Combo.vue +97 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jx3box/jx3box-editor",
3
- "version": "2.2.5",
3
+ "version": "2.2.6",
4
4
  "description": "JX3BOX Article & Editor",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/Combo.vue CHANGED
@@ -76,7 +76,7 @@
76
76
  <i class="el-icon-time"></i>
77
77
  </i>
78
78
  <span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
79
- <span class="u-note" :title="skill.n">{{ skill.n }}</span>
79
+ <span class="u-note" :title="skill.n" :style="itemStyle(skill)">{{ skill.n }}</span>
80
80
  </div>
81
81
  <i class="u-remove-icon" title="移除" @click="removeSelected(index)"><i class="el-icon-close"></i></i>
82
82
  </li>
@@ -84,6 +84,32 @@
84
84
  </div>
85
85
  </div>
86
86
  </div>
87
+ <el-dialog :visible.sync="showRemark" width="600px" append-to-body v-draggable class="c-large-dialog" title="设置备注">
88
+ <el-form label-position="left" label-width="80px">
89
+ <el-form-item label="备注">
90
+ <el-input placeholder="输入备注" v-model="form.n"></el-input>
91
+ </el-form-item>
92
+ <el-form-item label="文字颜色">
93
+ <el-color-picker v-model="form.c" :predefine="predefineColors" show-alpha></el-color-picker>
94
+ </el-form-item>
95
+ <el-form-item label="文字大小">
96
+ <el-input v-model="form.fz"></el-input>
97
+ </el-form-item>
98
+ <el-form-item label="文字粗细">
99
+ <el-select v-model="form.fw">
100
+ <el-option v-for="i in 9" :key="i" :value="i * 100" :label="i * 100"></el-option>
101
+ </el-select>
102
+ </el-form-item>
103
+ <el-form-item label="预览">
104
+ <span :style="nStyle">{{ form.n || '示例文字' }}</span>
105
+ </el-form-item>
106
+ </el-form>
107
+ <span slot="footer" class="dialog-footer">
108
+ <el-button @click="showRemark = false">取 消</el-button>
109
+ <el-button type="primary" @click="confirm">确 定
110
+ </el-button>
111
+ </span>
112
+ </el-dialog>
87
113
  </div>
88
114
  </template>
89
115
 
@@ -94,7 +120,7 @@ import { getSkill } from "../../service/resource";
94
120
  import SkillMartial from "./SkillMartial.vue";
95
121
 
96
122
  import Sortable from "sortablejs";
97
- import { cloneDeep } from "lodash";
123
+ import { cloneDeep, pick } from "lodash";
98
124
 
99
125
  import LoadScript from "vue-plugin-load-script";
100
126
  Vue.use(LoadScript);
@@ -145,17 +171,34 @@ export default {
145
171
  selected: [],
146
172
 
147
173
  sort: false,
174
+
175
+ form: {
176
+ n: "",
177
+ c: "",
178
+ fz: "14",
179
+ fw: "500"
180
+ },
181
+ showRemark: false,
182
+ currentSkill: {},
183
+
184
+ predefineColors: [
185
+ '#ff4500',
186
+ '#ff8c00',
187
+ '#ffd700',
188
+ '#90ee90',
189
+ '#00ced1',
190
+ '#1e90ff',
191
+ '#c71585',
192
+ 'rgba(255, 69, 0, 0.68)',
193
+ 'rgb(255, 120, 0)',
194
+ 'hsv(51, 100, 98)',
195
+ 'hsva(120, 40, 94, 0.5)',
196
+ 'hsl(181, 100%, 37%)',
197
+ 'hsla(209, 100%, 56%, 0.73)',
198
+ '#c7158577',
199
+ ]
148
200
  };
149
201
  },
150
- // watch: {
151
- // sort: function (val) {
152
- // if (val) {
153
- // this.$nextTick(() => {
154
- // this.initSkillSort();
155
- // });
156
- // }
157
- // },
158
- // },
159
202
  computed: {
160
203
  hasNextPage: function () {
161
204
  return this.total > 1 && this.page < this.pages;
@@ -166,6 +209,13 @@ export default {
166
209
  isBlank: function () {
167
210
  return !this.query && !this.skill["length"];
168
211
  },
212
+ nStyle() {
213
+ return pick({
214
+ color: this.form.c,
215
+ fontSize: (this.form.fz || 12) + 'px',
216
+ fontWeight: this.form.fw
217
+ }, ['color','fontSize','fontWeight'])
218
+ }
169
219
  },
170
220
  mounted() {
171
221
  this.$nextTick(() => {
@@ -264,19 +314,21 @@ export default {
264
314
  {
265
315
  label: "备注",
266
316
  onClick: () => {
267
- this.$prompt("请输入备注", "备注", {
268
- confirmButtonText: "确定",
269
- cancelButtonText: "取消",
270
- inputValue: skill?.n || "",
271
- // 最长4个字
272
- inputValidator: (value) => {
273
- return value.length <= 4;
274
- },
275
- })
276
- .then(({ value }) => {
277
- this.$set(skill, "n", value);
278
- })
279
- .catch(() => {});
317
+ this.showRemark = true;
318
+ this.currentSkill = skill
319
+ // this.$prompt("请输入备注", "备注", {
320
+ // confirmButtonText: "确定",
321
+ // cancelButtonText: "取消",
322
+ // inputValue: skill?.n || "",
323
+ // // 最长4个字
324
+ // inputValidator: (value) => {
325
+ // return value.length <= 4;
326
+ // },
327
+ // })
328
+ // .then(({ value }) => {
329
+ // this.$set(skill, "n", value);
330
+ // })
331
+ // .catch(() => {});
280
332
  },
281
333
  }
282
334
  ],
@@ -295,12 +347,33 @@ export default {
295
347
  gcd: item.WithoutGcd ? 0 : 1,
296
348
  };
297
349
  item.n && (obj.n = item.n);
350
+ item.c && (obj.c = item.c);
351
+ item.fz && (obj.fz = item.fz);
352
+ item.fw && (obj.fw = item.fw);
353
+
298
354
  item.client = this.client;
299
355
  skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${item.IconID},${JSON.stringify(obj)}</li>`;
300
356
  });
301
357
  const html = `<ul class="e-skill-combo w-skill-combo">${skills_html}</ul>`;
302
358
  return html;
303
359
  },
360
+ confirm() {
361
+ if (this.form.n) {
362
+ this.$set(this.currentSkill, 'n', this.form.n);
363
+ this.$set(this.currentSkill, 'c', this.form.c);
364
+ this.$set(this.currentSkill, 'fz', this.form.fz);
365
+ this.$set(this.currentSkill, 'fw', this.form.fw);
366
+ }
367
+
368
+ this.showRemark = false
369
+ },
370
+ itemStyle(item) {
371
+ return pick({
372
+ color: item.c,
373
+ fontSize: (item.fz || 12) + 'px',
374
+ fontWeight: item.fw
375
+ }, ['color','fontSize','fontWeight'])
376
+ }
304
377
  },
305
378
  };
306
379
  </script>