update transition

oeyoews · Mar 9, 2024 · bb9a94e · bb9a94e
1 parent 3f24f3f
commit bb9a94e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/plugins/oeyoews/vue-random-cards/tiddlers/component.js b/plugins/oeyoews/vue-random-cards/tiddlers/component.js
@@ -30,7 +30,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
  const component = {
  setup() {
  const cardContent = ref('');
- const titles = ref([]);
+ const title = ref('');
 
  const chartapp = ref();
  const chart = ref();
@@ -82,7 +82,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
  chart,
  chartdata,
  chartapp,
- titles,
+ title,
  cardContent
  };
  },
@@ -116,7 +116,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
  if (this.chartdata.length > 10) {
  this.resetChart();
  this.chartdata.push({
- name: this.titles[0],
+ name: this.title,
  value: 1
  });
  }
@@ -137,25 +137,25 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
  renderTiddler2HTML() {
  try {
  this.cardContent =
- $tw.wiki.renderTiddler('text/html', this.titles[0]) || '空空如也';
+ $tw.wiki.renderTiddler('text/html', this.title) || '空空如也';
  } catch (e) {
  console.error(e);
  // toast.error(e.message);
  }
  },
 
  updateCard() {
- this.titles[0] = this.randomTiddlerTitle();
+ this.title = this.randomTiddlerTitle();
  this.chartdata.push({
- name: this.titles[0],
+ name: this.title,
  value: 1
  });
 
  this.renderTiddler2HTML();
  },
 
  gotoTiddler() {
- story.navigateTiddler(this.titles[0]);
+ story.navigateTiddler(this.title);
  }
  },
 

diff --git a/plugins/oeyoews/vue-random-cards/tiddlers/widget.vue b/plugins/oeyoews/vue-random-cards/tiddlers/widget.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex items-center justify-end gap-2">
- <button @click="gotoTiddler" v-if="titles[0]" class="p-2">卡片跳转</button>
+ <button @click="gotoTiddler" v-if="title" class="p-2">卡片跳转</button>
  <button @click="resetChart" v-show="chartdata.length > 0" class="p-2">
  重置数据
  </button>
@@ -27,22 +27,21 @@
  ref="chart"
  style="width: 900px; height: 300px"
  class="overflow-auto"
- v-show="titles[0]"
+ v-show="title"
  ></div>
  </Transition>
  </div>
 
- <TransitionGroup>
- <div v-for="title in titles" :key="title">
- <div
- class="p-4 rounded border border-solid dark:border-gray-400 my-2 border-gray-200"
- v-if="title"
- >
- <h2>
- {{ title }}
- </h2>
- <p v-html="cardContent" />
- </div>
+ <Transition>
+ <div
+ class="p-4 rounded border border-solid dark:border-gray-400 my-2 border-gray-200"
+ v-if="title"
+ :key="title"
+ >
+ <h2>
+ {{ title }}
+ </h2>
+ <p v-html="cardContent" />
  </div>
- </TransitionGroup>
+ </Transition>
 </template>