|
|
| （未显示同一用户的14个中间版本） |
| 第1行： |
第1行： |
| // Get the page content | | // mw.loader.load( 'https://thga.me/用户:玲子/CodexDemo.js?action=raw&ctype=text/javascript' ); |
| const content = document.getElementById( 'mw-content-text' );
| |
| if ( !content ) {
| |
| return;
| |
| }
| |
| const container = document.createElement( 'div' );
| |
| content.insertBefore( container, content.firstChild );
| |
| | |
| mw.loader.using( '@wikimedia/codex' ).then( function( require ) { | |
| const Vue = require( 'vue' );
| |
| const Codex = require( '@wikimedia/codex' );
| |
|
| |
| Vue.createMwApp( {
| |
| data: function() {
| |
| return {
| |
| showDialog: false,
| |
| count: 0,
| |
| codexLink: 'https://doc.wikimedia.org/codex/latest/'
| |
| };
| |
| },
| |
| template: `
| |
| <cdx-dialog v-model:open="showDialog"
| |
| title="Hello from Codex"
| |
| close-button-label="Close"
| |
| :default-action="defaultAction"
| |
| @default="open = false"
| |
| >
| |
| <p>This Dialog component comes from Codex, the new design system for Wikimedia.</p>
| |
| <p>To learn more about Codex, check out the documentation <a :href="codexLink" target="_blank">here.</a></p>
| |
| <hr />
| |
| <p>Click these buttons to update the reactive count value:</p>
| |
| <p>Count: {{ count }}</p>
| |
| <p>
| |
| <cdx-button action="destructive" @click="decrement">Decrease</cdx-button>
| |
| <cdx-button action="progressive" @click="increment">Increase</cdx-button>
| |
| </p>
| |
| </cdx-dialog>
| |
| `,
| |
| methods: {
| |
| openDialog () {
| |
| this.showDialog = true;
| |
| },
| |
| increment() {
| |
| this.count++;
| |
| },
| |
| decrement() {
| |
| this.count--;
| |
| }
| |
| },
| |
| mounted() {
| |
| dialogTrigger.addEventListener( 'click', this.openDialog );
| |
| },
| |
| unMounted() {
| |
| dialogTrigger.removeEventListener( this.openDialog );
| |
| }
| |
| } )
| |
| .component( 'cdx-button', Codex.CdxButton )
| |
| .component( 'cdx-dialog', Codex.CdxDialog )
| |
| .mount( container );
| |
| } );
| |
// mw.loader.load( 'https://thga.me/用户:玲子/CodexDemo.js?action=raw&ctype=text/javascript' );
