|
|
| 第1行： |
第1行： |
| // Add a "Codex Widgets" portlet to the main menu
| |
| mw.util.addPortlet( 'p-codex', 'Codex Widgets', '#p-interaction' );
| |
| const dialogTrigger = mw.util.addPortletLink( 'p-codex', '#', 'Example Dialog Widget', 'p-codex-dialog' );
| |
|
| |
| mw.loader.using( '@wikimedia/codex' ).then( function( require ) { | | mw.loader.using( '@wikimedia/codex' ).then( function( require ) { |
| const Vue = require( 'vue' ); | | //... require Vue and Codex as above |
| const Codex = require( '@wikimedia/codex' ); | | // create an element to mount the Vue app |
| const mountPoint = document.body.appendChild( document.createElement( 'div' ) ); | | const mountPoint = document.body.appendChild( document.createElement( 'div' ) ); |
| | | // create a Vue app and mount it to the target element |
| Vue.createMwApp( { | | Vue.createMwApp( { |
| data: function() { | | // data, computed props, methods, etc. go here |
| return {
| | } ).mount( mountPoint ); |
| 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( mountPoint );
| |
| } ); | | } ); |
mw.loader.using( '@wikimedia/codex' ).then( function( require ) {
//... require Vue and Codex as above
// create an element to mount the Vue app
const mountPoint = document.body.appendChild( document.createElement( 'div' ) );
// create a Vue app and mount it to the target element
Vue.createMwApp( {
// data, computed props, methods, etc. go here
} ).mount( mountPoint );
} );
